<template>
    <div class="user-layout-wrapper">
        <div class="container">
            <div class="user-layout-content">
                <div class="top">
                    <div class="header">
                        <span class="title">
                            网球公园
                        </span>
                    </div>
                    <div class="desc">
                        欢迎登录
                    </div>
                </div>
                <div class="main">
                    <el-tabs v-model="activeName">
                        <el-tab-pane label="账号密码" name="account">
                            <el-form ref="formRef" :model="formData" :rules="rules" size="large">
                                <el-form-item prop="account">
                                    <el-input v-model="formData.account" placeholder="请输入用户名" :prefix-icon="User" :disabled="loading"/>
                                </el-form-item>
                                <el-form-item prop="password">
                                    <el-input v-model="formData.password" type="password" placeholder="请输入密码" :prefix-icon="Lock" show-password :disabled="loading"/>
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="primary" class="login-button" @click="preLogin()" :loading="loading">登录</el-button>
                                </el-form-item>
                            </el-form>
                        </el-tab-pane>
                    </el-tabs>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue';
import { User, Lock } from '@element-plus/icons-vue'
import type { FormRules } from 'element-plus'
import { ElMessage } from 'element-plus'
import { useAccountStore } from '../../store/accout'
import { useRouter } from 'vue-router';
const accountStore = useAccountStore()

interface RuleForm {
    account: string
    password: string
}

const formData = ref<RuleForm>({
    account: '',
    password: ''
})
const rules = reactive<FormRules<RuleForm>>({
    account: [{ required: true, message: "请输入用户名", trigger: 'blur' }],
    password: [{ required: true, message: "请输入密码", trigger: 'blur' }]
})
const activeName = ref<string>("account")
const loading = ref<boolean>(false)
const formRef = ref()
const router = useRouter()
function preLogin () {
    formRef.value.validate().then(() => {
        doLogin()
    })
}
function doLogin () {
    let params = {
        account: formData.value.account,
        password: formData.value.password
    }
    loading.value = true
    accountStore.doAccountLogin(params).then((res:any) => {
        if (res.code === 't_200') {
            ElMessage.success(res.msg)
            router.push({path: "/"})
        } else {
            ElMessage.error(res.msg)
        }
    }).finally(() => {
        loading.value = false
    })
}

</script>
<style lang="scss" scoped>
.user-layout-wrapper{
    height: 100%;
    min-height: 100vh;
    .container {
        width: 100%;
        min-height: 100vh;
        background: #f0f2f5 url(@/assets/login-bg.svg) no-repeat 50%;
        background-size: 100%;
        position: relative;
        .user-layout-content {
            padding: 32px 0 24px;
            .top {
                text-align: center;
                .header {
                    height: 44px;
                    line-height: 44px;
                    .logo {
                        height: 44px;
                        vertical-align: top;
                        margin-right: 16px;
                        border-style: none;
                    }
                    .title {
                        font-size: 33px;
                        color: rgba(0, 0, 0, .85);
                        font-family: Avenir, 'Helvetica Neue', Arial, Helvetica, sans-serif;
                        font-weight: 600;
                        position: relative;
                        top: 2px;
                    }
                }
                .desc {
                    font-size: 14px;
                    color: rgba(0, 0, 0, 0.45);
                    margin-top: 12px;
                    margin-bottom: 40px;
                }
            }
            .main{
                min-width: 368px;
                width: 368px;
                margin: 0 auto;
                :deep(.el-tabs__nav-scroll){
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
                .login-button {
                    padding: 0 15px;
                    font-size: 16px;
                    height: 40px;
                    width: 100%;
                    margin-top: 20px;
                }
            }
            .footer {
                // position: absolute;
                width: 100%;
                bottom: 0;
                padding: 0 16px;
                margin: 48px 0 24px;
                text-align: center;
                .links {
                    margin-bottom: 8px;
                    font-size: 14px;
                    span {
                    color: rgba(0, 0, 0, 0.45);
                    transition: all 0.3s;
                    &:not(:last-child) {
                        margin-right: 40px;
                    }
                    }
                }
                .copyright {
                    color: rgba(0, 0, 0, 0.45);
                    font-size: 14px;
                }
            }
        }
    }
}
</style>